<template>
  <div class="left_firstmap com_echarts" id="left_firstmap">
  </div>
</template>

<script>
import echarts from 'echarts';
export default {
  name: 'left_firstmap',
  data () {
    return {
        id:"left_firstmap"
    }
  },
  created () {

  },
  mounted(){
      this.initMap();
  },
  methods:{
    initMap(){
        let that = this;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(this.id));
        var cost = [0.2, 0.20, 0.2,0.2]//本期比上期（大于1按1处理）
        var dataCost = [5000,5000,5000,5000]//真是的金额
        var totalCost = [1, 1, 1, 1]//比例综合
        var visits = [20, 20, 20, 20]//本期占总的百分比*100'
        var grade = ['新农合', '农村居民', '城镇居民', '职工人数']
        var myColor = ['#f77900', '#f7b61c', '#6cdabd', '#3c9dff']
        var img1 = './assets/images/screen/medical_reform_detection/ico1.png'
        var data = {
            title: "基本医保参保人数及参保率",
            grade: grade,
            cost: cost,
            totalCost: totalCost,
            visits: visits,
            dataCost:dataCost
        };
        var ico1 = 'image://'
        var ico2 = 'image://'
        var ico3 = 'image://'
        var ico4 = 'image://'
        var option = {
            backgroundColor: 'rgba(0,0,0,0)',
            title: {
                top: '5%',
                left: '2%',
                text: data.title,
                textStyle: {
                    align: 'center',
                    color: '#4DCEF8',
                    fontSize: 14
                }
            },
            tooltip: {
                formatter: function(params) {
                    return grade[params.dataIndex] + ":" + visits[params.dataIndex] + '%';
                }
            },
            grid: {
                left: '16%',
                bottom: 0,
                width: '50%',
                containLabel: false
            },
            xAxis: {
                show: false,
            },
            yAxis: {
                type: 'category',
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                data: data.grade
            },
            series: [
                 {
                    name: '白框',
                    type: 'bar',
                    barGap: '-100%',
                    data: data.totalCost,
                    barWidth: 12,
                    itemStyle: {
                        normal: {
                            color: '#05274C',
                            borderWidth: 1,
                        }
                    },
                    z: 1
                 },
                {
                type: 'bar',
                barGap: '-100%',
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        rich: { //富文本
                                white: { //自定义颜色
                                    color: '#3c9dff',
                                },
                                blue: {
                                    color: '#3c9dff',
                                    fontSize: 18
                                },
                                green: {
                                    color: '#6cdabd',
                                    fontSize: 18
                                },
                                yellow: {
                                    color: '#f7b61c',
                                    fontSize: 18
                                },
                                orange: {
                                    color: '#f77900',
                                    fontSize: 18
                                }
                            },
                        formatter: function(param) {
                            if(param.dataIndex=='0'){
                                return '           '+ '{orange|'+ data.dataCost[param.dataIndex]+'}{white|  (人)}';
                            }
                            if(param.dataIndex=='1'){
                                return '           '+ '{yellow|'+ data.dataCost[param.dataIndex]+'}{white|  (人)}';
                            }
                            if(param.dataIndex=='2'){
                                return '           '+ '{green|'+ data.dataCost[param.dataIndex]+'}{white|  (人)}';
                            }
                            if(param.dataIndex=='3'){
                                return '           '+ '{blue|'+ data.dataCost[param.dataIndex]+'}{white|  (人)}';
                            }
                        },
                    }
                },
                barWidth: 12,
                itemStyle: {
                    normal: {
                        // borderWidth: 1,
                        color: function(params) {
                        var num = myColor.length;
                        return myColor[params.dataIndex % num]
                    },
                    },
                },
                z: 0,
                data: data.totalCost,
            }, {
                type: 'bar',
                barGap: '-98%',
                barWidth: 12,
                itemStyle: {
                    normal: {
                        color: function(params) {
                                var num = myColor.length;
                                return myColor[params.dataIndex % num]
                            },
                    },
                },
                max: 1,
                label: {
                    normal: {
                        show: true,
                        position: [0, '-200%'],
                        fontSize: 14,
                        formatter: function(param) {
                            return grade[param.dataIndex] + '(' + data.visits[param.dataIndex] + '%)';
                            
                        },
                    }
                },
                labelLine: {
                    show: true,
                },
                z: 2,
                data: data.cost,
            },
            {
                name: 'glyph',
                type: 'pictorialBar',
                barGap: '-100%',
                symbolPosition: 'start',
                symbolSize: 36,
                symbolOffset: [-62, -15],
                data: [{
                    value: 1,
                    symbol: ico4,
                }, {
                    value: 1,
                    symbol: ico3,
                }, {
                    value: 1,
                    symbol: ico2,
                }, {
                    value: 1,
                    symbol: ico1,
                }]
            }
          ]
        }
        myChart.setOption(option);
    },
    randomData() {
        return Math.round(Math.random()*1000);
    }
  }
}
</script>
<style lang='scss'  rel="stylesheet/scss" scoped>
.com_echarts{
    width:100%;
    height:100%;
}
</style>
